<template>
	<md-field-group class="register_submit">
		<md-field v-model="code" icon="mobile" placeholder="请输入验证码">
			<div slot="rightIcon" @click="getCode" class="getCode red">
				<countdown v-if="counting" :time="6000" @end="countdownend">
				  <template slot-scope="props">{{ +props.seconds || 60 }}秒后获取</template>
				</countdown>

				<span v-else>获取验证码</span>
			</div>
		</md-field>
		<!-- <md-field v-model="password" icon="lock" placeholder="请输入密码"/> -->
		<!-- <md-field v-model="repeatPassword" icon="lock" placeholder="请再次确认密码"/> -->

		<div class="register_submit_btn">
			<van-button type="danger" size="large" @click="registerSubmit">确定</van-button>
		</div>
	</md-field-group>
</template>

<script>
import axios from 'axios';
import { authSms, loginByCaptcha } from '@/api/api';
import field from '@/components/field/';
import fieldGroup from '@/components/field-group/';
import { getLocalStorage, setLocalStorage, removeLocalStorage } from '@/utils/local-storage';

export default {
  data() {
    return {
      counting: true,
      mobile: '',
      code: '',
      password: '',
      repeatPassword: '',
      userInfo: {}
    };
  },

  mounted () {
    this.getInfo()
  },

  methods: {
    registerSubmit() {
      console.log(this.mobile)
      if (this.code) {
        axios.post(process.env.VUE_APP_BASE_API+'/wx/auth/loginByCaptcha', {mobile: this.mobile, code: this.code}).then(res => {
          console.log(this.mobile)
          console.log(res.data)
          if(res.data.errno === 0) {
            removeLocalStorage({
              LoginMobile: this.mobile
            });
            this.userInfo = res.data.data.userInfo;
            setLocalStorage({
              Authorization: res.data.data.token,
              avatar: this.userInfo.avatarUrl,
              nickName: this.userInfo.nickName,
              storeId: this.userInfo.storeId,
              storeName: this.userInfo.storeName
            });
            this.routerRedirect();
          } else {
            this.$toast(res.data.errmsg);
          }
        }).catch((e) => {
          console.log(e);
          this.$toast('错误');
        });
      } else {
        this.$toast('请填写验证码');
      }
    },
    routerRedirect() {
      window.location = '#/user/';
    },
    getInfo () {
      if (getLocalStorage('LoginMobile').LoginMobile) {
        this.mobile = getLocalStorage('LoginMobile').LoginMobile;
      }
    },
    getCode() {
      this.counting = true;
      axios.post(process.env.VUE_APP_BASE_API+'/wx/auth/sendSMSForLogin', {mobile: this.mobile}).then(res =>{
        // console.log(res)
        if(res.data.errno === 0) {
          setLocalStorage({
            LoginMobile: this.mobile,
          });
          this.$toast('发送短信成功！');
        } else {
          this.$toast(res.data.errmsg);
        }
      }).catch((e) => {
        console.log(e);
        this.$toast('错误');
      });
    },
    countdownend() {
      this.counting = false;
    }
  },

  components: {
    [field.name]: field,
    [fieldGroup.name]: fieldGroup
  }
};
</script>


<style lang="scss" scoped>
@import '../../../assets/scss/mixin';

.register_submit {
  padding-top: 40px;
  background-color: #fff;
}

.register_submit_btn {
  padding-top: 30px;
}

.getCode {
  @include one-border(left);
  text-align: center;
}

.time_down {
  color: $red;
}
</style>
